<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Elastic Shadow Buttons - 弹性阴影按钮</title>
<style type="text/css">
	h1 {
		display: block;
		font-size: 2em;
		-webkit-margin-before: 0.67em;
		-webkit-margin-after: 0.67em;
		-webkit-margin-start: 0px;
		-webkit-margin-end: 0px;
		font-weight: bold;
	}
	.w {
		width: 900px;
		margin: 0 auto;
		margin-bottom: 40px;
	}
	.blu-btn {
		display: inline-block;
		-moz-border-radius: .25em;
		border-radius: .25em;
		-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
		-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
		box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
		background-color: #276195;
		background-image: -moz-linear-gradient(#3c88cc,#276195);
		background-image: -ms-linear-gradient(#3c88cc,#276195);
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#3c88cc),color-stop(100%,#276195));
		background-image: -webkit-linear-gradient(#3c88cc,#276195);
		background-image: -o-linear-gradient(#3c88cc,#276195);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c88cc',endColorstr='#276195',GradientType=0);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c88cc', endColorstr='#276195', GradientType=0)";
		background-image: linear-gradient(#3c88cc,#276195);
		border: 0;
		cursor: pointer;
		color: #fff;
		text-decoration: none;
		text-align: center;
		font-size: 16px;
		padding: 0px 20px;
		height: 40px;
		line-height: 40px;
		min-width: 100px;
		text-shadow: 0 1px 0 rgba(0,0,0,0.35);
		font-family: Arial, Tahoma, sans-serif;
		-webkit-transition: all linear .2s;
		-moz-transition: all linear .2s;
		-o-transition: all linear .2s;
		-ms-transition: all linear .2s;
		transition: all linear .2s
	}
	.blu-btn:hover, .blu-btn:focus {
		-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #3089d8;
		-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #3089d8;
		box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #3089d8;
	}
	.blu-btn:active {
		-webkit-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
		-moz-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
		box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
	}
	
	
	.grn-btn {
		display: inline-block;
		-moz-border-radius: .25em;
		border-radius: .25em;
		-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
		-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
		box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
		background-color: #659324;
		background-image: -moz-linear-gradient(#81bc2e,#659324);
		background-image: -ms-linear-gradient(#81bc2e,#659324);
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#81bc2e),color-stop(100%,#659324));
		background-image: -webkit-linear-gradient(#81bc2e,#659324);
		background-image: -o-linear-gradient(#81bc2e,#659324);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#81bc2e',endColorstr='#659324',GradientType=0);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#81bc2e', endColorstr='#659324', GradientType=0)";
		background-image: linear-gradient(#81bc2e,#659324);
		border: 0;
		cursor: pointer;
		color: #fff;
		text-decoration: none;
		text-align: center;
		font-size: 16px;
		padding: 0px 20px;
		height: 40px;
		line-height: 40px;
		min-width: 100px;
		text-shadow: 0 1px 0 rgba(0,0,0,0.35);
		font-family: Arial, Tahoma, sans-serif;
		-webkit-transition: all linear .2s;
		-moz-transition: all linear .2s;
		-o-transition: all linear .2s;
		-ms-transition: all linear .2s;
		transition: all linear .2s;
	}
	.grn-btn:hover, .grn-btn:focus {
		-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #85ca26;
		-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #85ca26;
		box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #85ca26;
	}
	.grn-btn:active {
		-webkit-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
		-moz-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
		box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
	}

</style>
</head>
<body>
	<div class="w">
		<h1>#10 Elastic Shadow Buttons</h1>
		<div class="btn-container">
			<a href="javascript:void(0)" class="blu-btn">Blue Button</a>
		</div>
		<br />
		<div class="btn-container">
			<a href="javascript:void(0)" class="grn-btn">Greenie</a>
		</div>
	</div>
</body>
</html>